<template>
    <!-- 手机号登入 -->
   <div class="smsContainer">
        <!-- <h1 class="h">短信登入</h1> -->
        <el-form-item label="手机号">
            <el-input maxlength="11" class="captcha phone"></el-input>
            <span class="captcha-svg" style="color:#888; line-height:45px; text-decoration:underline;">

            </span>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha">
            <el-input ></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary">提交</el-button>
            
        </el-form-item>
    </div>
</template>
<script>
      
export default {
   data() {     
      return {
        msg:'点击发送验证码',
        flag:true,
        phoneNumber:"",
        code:""
      };
    },
}
</script>
<style scoped lang="less">
    /* 修改element-ui的样式
    1.打开调试器，找准类名，覆盖样式
    2.看权重，使用！important
    3.使用深度选择器 >>>  /deep/ */
     /deep/ .captcha {
            width: 100px;
            vertical-align: top;
     }     
    .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 45px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0px 5px 5px 0;
        }
        .el-form-item__content {
            margin-left: 30px !important;
            width: 250px !important;
        }
         /deep/ .captcha {
            width: 100px;
            vertical-align: top;

            .el-input__inner {
                width: 100%;
                height: 45px;
                border-radius: 5px 0 0 5px;
                border: 0;
                font-size: 18px;
            }
        }
        /deep/ .el-form-item__label {
            color: #fff;
        }
         /deep/ .el-input__inner {
            width: 250px;
        }
         /deep/ .el-button--primary {
            background: linear-gradient(90deg, #1596fb, #002dff);
            width: 250px;
        }
        
</style>


